<template>
    <!-- 设备看板,联络灯管理 -->
    <div class="top">
        <div class="top_SIDE_1">
            <div class="demonstration">
                <a-tree-select v-model="groupName"
                    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' ,paddingRight:'10px',background:'#114868'}"
                    :replaceFields="replaceFields" :tree-data="treeData" @change="onChange"
                    dropdownClassName="largescreenCustom" :getPopupContainer="triggerNode=> triggerNode.parentNode">
                </a-tree-select>

                <i class="el-icon-s-tools" @click="handleSet" 
                    style="font-size:20px;color:#fff;cursor: pointer;margin:0 16px 0 6px"></i>

                <i :class="isFull ? 'iconfont icon-quanping-suoxiao' : 'el-icon-full-screen'" @click="handleFull"
                    style="font-size:20px;color:#fff;cursor: pointer;"></i>
                <!-- <el-date-picker v-model="daterange" type="daterange" align="right" unlink-panels range-separator="至"
                    :picker-options="pickerOptions" size="mini" :clearable="false" :editable='false'>
                </el-date-picker> -->
            </div>
            <div class="time fontStyle" style="padding-right: 20px;">{{time}}</div>
        </div>
        <div class="boardName fontStyle">{{name}}</div>
    </div>
</template>

<script>
    import {
        treeList
    } from '@/api/treeController'
    export default {
        data() {
            return {
                time: '',
                daterange: [new Date(), new Date()],
                pickerOptions: {
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                groupName: "",
                treeData: [],
                replaceFields: {
                    children: 'child',
                    title: 'label',
                    key: 'id',
                    value: 'id'
                },
                isFull: false
            }
        },
        props: ['name'],
        mounted() {
            this.loop()
            this.getTreeList()
        },
        methods: {
            //树列表
            getTreeList() {
                treeList().then(res => {
                    if (res.code == 200) {
                        const all = {
                            child: null,
                            id: '',
                            label: "全部"
                        }
                        this.treeData = [all,...res.data]
                        if (res.data.length) {
                            const id = this.treeData[0].id
                            this.groupName = id
                            this.$emit('getId', id)
                            this.$emit('getCheckGroup',res.data)
                        }
                    }
                })
            },
            onChange(value) {
                this.$emit('getId', value)
            },
            loop() {
                this.time = new Date().dateFormat("yyyy/MM/dd hh:mm")
                window.loopTimer = setInterval(() => {
                    this.time = new Date().dateFormat("yyyy/MM/dd hh:mm")
                }, 1000)
                this.$on('hook:beforeDestroy', () => {
                    clearInterval(window.loopTimer)
                })
            },
            handleFull() {
                if (document.fullscreenEnabled) { //是否支持全屏
                    this.isFull = document.fullscreenElement === null
                    document.onfullscreenchange = this.handleFullscreenChange
                    this.$emit('fullscreen',this.isFull)
                } else {
                    this.utils.showMsg('你的浏览器不支持全屏模式！', 'error')
                }
            },
            handleSet(){
                this.$emit('setBoard')
            },
            handleFullscreenChange(){
                // ********** 当事件处理程序处于 fullscreenchange 模式的时候，表明游戏元素被改变了或者是退出了全屏模式
                this.isFull = document.fullscreenElement !== null
            }
        }
    }
</script>

<style lang="less" scoped>
    .top {
        position: relative;
        height: 56px;
        margin-bottom: 20px;
        background: url(~@/assets/farmBoard/top.png);
        background-size: 100% 100%;

        .top_SIDE_1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 100%;

            .demonstration {
                display: flex;
                align-items: center;
                padding-left: 20px;

                ::v-deep .ant-select-arrow {
                    margin-top: -7px;
                    color: #fff;
                    font-size: 16px
                }

                ::v-deep .ant-select-selection--single {
                    background: transparent;
                    border: none;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 600;
                    box-shadow: none;

                    .ant-select-selection__rendered {
                        margin-right: 35px;
                    }
                }
            }
        }

        .boardName {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .fontStyle {
            font-size: 20px;
            font-weight: 700;
            color: #fff;
        }
    }
</style>